<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #app {
            width: 622px;
            margin: 10px auto;
        }

        .content,
        .brand {
            width: 600px;
            border: 1px solid black;
            padding: 10px;
            margin-bottom: 10px;
        }

        .tab {
            border-collapse: collapse;
            width: 622px;
            border: 1px solid black;
        }

        tr,
        th,
        td {
            text-align: center;
            border: 1px solid black;
        }

        tr:nth-of-type(1) {
            background-color: aqua;
        }

        .more {
            width: 620px;
            border: 1px solid black;
            text-align: center;
        }

        img {
            width: 100px;
            height: 100px;
        }

        .price td {
            text-align: right;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="content">
            编号：<input type="text" v-model="code">
            品牌名称：<input type="text" v-model="productName">
            <br>
            产品图片地址：<input type="text" v-model="imgSrc">
            价格：<input type="text" v-model="price">
            <!-- 添加产品事件 -->
            <input type="button" value="添加" @click="add">
        </div>

        <div class="brand">
            品牌名称：<input type="text">
        </div>

        <table class="tab">
            <tr>
                <th>
                    全选
                    <input type="checkbox" @change="checkAll" :checked="allCheck">
                </th>
                <th>产品图片</th>
                <th>编号</th>
                <th>品牌名称</th>
                <th>价格</th>
                <th>数量</th>
                <th>操作</th>
            </tr>
            <!-- 动态渲染tr -->
            <tr v-for="(item,index) of products" :key="item.id">
                <td>
                    <input type="checkbox" v-model="checks" :value="item">
                </td>
                <td>
                    <img :src="item.imgSrc" alt="">
                </td>
                <td>{{item.code}}</td>
                <td>{{item.productName}}</td>
                <td>{{item.price}}</td>
                <td>
                    <!-- 数量增加 减少事件  按钮禁用 -->
                    <button @click="decrease(item)" :disabled="item.count===1">-</button>
                    <span>{{item.count}}</span>
                    <button @click="increase(item)">+</button>
                </td>
                <td>
                    <!-- 删除事件 -->
                    <button @click="del(index)">删除</button>
                </td>
            </tr>
            <tr class="price">
                <td colspan="7">总价：{{totalPrice}}</td>
            </tr>
        </table>
        <div class="more" v-show="!products.length">没有更多数据了</div>
        <!-- <div class="price"></div> -->
    </div>
</body>

</html>
<script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            //双向绑定数据
            code: '',
            productName: '',
            imgSrc: '',
            price: '',
            checks: [],
            allCheck: false,

            //数据
            products: [
                {
                    id: 1,
                    imgSrc: 'https://img1.baidu.com/it/u=2342764402,360630583&fm=253&fmt=auto&app=138&f=JPEG?w=895&h=500',
                    code: 1,
                    productName: 'Nike',
                    price: 2,
                    count: 20
                },
                {
                    id: 2,
                    imgSrc: 'https://img2.baidu.com/it/u=349746257,3146435815&fm=253&fmt=auto&app=120&f=JPEG?w=599&h=591',
                    code: 2,
                    productName: 'addidas',
                    price: 3,
                    count: 20
                }
            ]
        },
        methods: {
            //删除
            del(i) {
                console.log(i)
                this.products.splice(i, 1)

            },
            //添加 
            add() {
                if (!this.code || !this.productName || !this.price) {
                    return
                }
                let obj = {
                    id: Math.random().toString(32).substring(2),
                    code: this.code,
                    productName: this.productName,
                    imgSrc: this.imgSrc ? this.imgSrc : 'https://img2.baidu.com/it/u=1519965074,817006438&fm=253&fmt=auto&app=138&f=PNG?w=200&h=200',
                    price: this.price,
                    count: 20
                }
                this.products.push(obj)
                this.code = ''
                this.productName = ''
                this.imgSrc = ''
                this.price = ''
            },
            //增加
            increase(item) {
                item.count++
            },
            //减少
            decrease(item) {
                item.count--
            },
            //全选
            checkAll(e) {
                //通过事件对象进行判断
                console.log(e.target.checked)
                if (e.target.checked) {
                    this.checks = this.products
                } else {
                    this.checks = []
                }
            },


        },
        //侦听
        watch: {
            checks(newVal) {
                if (this.checks.length === this.products.length) {
                    this.allCheck = true
                } else if (this.checks.length !== this.products.length || this.checks.length === 0) {
                    console.log(this.checks.length)
                    this.allCheck = false
                }
            }
        },
        // 计算
        computed: {
            totalPrice() {
                return (this.checks.reduce(function (total, item) {
                    return total += item.price * item.count
                }, 0)).toFixed(2)
            }
        }
    })
</script>